<template>
  <div class="container">
    <div class="header">
      <div class="headerLeft">
        <el-button
          type="primary"
          icon="el-icon-plus"
          @click="
            () => {
              isEdit = false;
              dialogFormVisible = true;
              form.type = '1';
            }
          "
          >新增菜品分类</el-button
        >
      </div>

      <el-button
        type="primary"
        icon="el-icon-plus"
        @click="
          () => {
            isEdit = false;
            dialogFormVisible = true;
            form.type = '2';
          }
        "
        >新增套餐分类</el-button
      >
    </div>

    <el-table :data="tableData" stripe style="width: 100%">
      <el-table-column prop="name" label="分类名称"></el-table-column>
      <el-table-column prop="type" label="分类类型">
        <template v-slot="{ row }">
          {{ Number(row.type) === 1 ? "菜品" : "套餐" }}
        </template>
      </el-table-column>
      <el-table-column prop="updateTime" label="操作时间"></el-table-column>
      <el-table-column prop="sort" label="排序"></el-table-column>
      <el-table-column prop="date" label="操作">
        <template v-slot="{ row }">
          <el-link
            type="primary"
            :underline="false"
            @click="handleChangeCategory(row)"
            >修改
          </el-link>
          <el-divider direction="vertical" />
          <el-link type="danger" :underline="false">删除</el-link>
        </template>
      </el-table-column>
    </el-table>

    <div class="footer">
      <el-pagination
        :current-page="pageInfo.page"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <el-dialog
      :title="`${this.isEdit ? '修改' : '新增'}${
        Number(form.type) === 1 ? '菜品' : '套餐'
      }分类`"
      :visible.sync="dialogFormVisible"
      @close="handleCancel"
    >
      <el-form ref="form" :model="form">
        <el-form-item label="分类名称：">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="排序：">
          <el-input v-model="form.sort" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleCancel">取 消</el-button>
        <el-button type="primary" @click="handleSave">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getCategorys, changeCategory, addCategory } from "@/api/category";
export default {
  data() {
    return {
      isEdit: false,
      tableData: [],
      pageInfo: { page: 1, pageSize: 10 },
      total: 0,
      dialogFormVisible: false,
      form: {
        name: "",
        sort: "",
        type: "1",
      },
    };
  },
  created() {
    this.init();
  },
  methods: {
    async handleSave() {
      if (this.isEdit) {
        await changeCategory(this.form);
        this.$message.success("修改成功");
      } else {
        await addCategory(this.form);
        this.$message.success("新增成功");
      }
      this.dialogFormVisible = false;
      this.form = {};
      this.init();
    },
    handleCancel() {
      this.dialogFormVisible = false;
      this.form = {};
    },
    init() {
      getCategorys(this.pageInfo).then((res) => {
        const { records, total } = res.data;
        this.tableData = records;
        this.total = total;
      });
    },
    handleChangeCategory(row) {
      this.isEdit = true;
      this.dialogFormVisible = true;
      this.form = row;
      this.init();
    },
    handleSizeChange(val) {
      this.pageInfo.pageSize = val;
      this.pageInfo.page = 1;
      this.init();
    },
    handleCurrentChange(val) {
      this.pageInfo.page = val;
      this.init();
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  padding: 55px;
  .header {
    display: flex;
    justify-content: flex-start;
    .headerLeft {
      margin-right: 10px;
    }
  }
  .footer {
    margin-top: 20px;
    display: flex;
    justify-content: center;
  }
}
</style>
